import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart';

import '../../common/config.dart';
import '../../common/utils/toast.dart';
import '../../ui/widget/radio.dart';

class AgeScreen extends StatefulWidget {
  const AgeScreen({super.key});

  @override
  State<AgeScreen> createState() => _AgeScreenState();
}

class _AgeScreenState extends State<AgeScreen> {
  final String title = 'Select Your Age';
  final String desc =
      'To make sure you receive the best personalized offers we need to know your age.';

  final List<String> ranges = [
    'Less than 18',
    '18-29',
    '30-39',
    '40-49',
    '50-59',
    '60 Above',
  ];
  final _AgeIndex index = _AgeIndex();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ChangeNotifierProvider.value(
          value: index,
          builder: (context, child) {
            return Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              mainAxisSize: MainAxisSize.max,
              children: [
                Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    buildTitle(),
                    buildContent(context),
                  ],
                ),
                ElevatedButton(
                  onPressed: onClickNext,
                  child: Container(
                    width: double.infinity,
                    height: 45,
                    margin: const EdgeInsets.symmetric(horizontal: 32)
                        .copyWith(bottom: 32),
                    decoration: BoxDecoration(
                      shape: BoxShape.rectangle,
                      color: const Color(0xFF4744d3),
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: const Center(
                        child: Text(
                      'Keep Going',
                      style: TextStyle(color: Colors.white),
                    )),
                  ),
                ),
              ],
            );
          },
        ),
      ),
    );
  }

  Widget buildTitle() {
    return Padding(
      padding: const EdgeInsets.only(left: 30, right: 30, top: 40),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text(
            title,
            style: const TextStyle(
              fontSize: 18,
              color: Color(0xFF7761FF),
              overflow: TextOverflow.ellipsis,
              fontWeight: FontWeight.bold,
            ),
          ),
          const SizedBox(height: 6),
          Text(
            desc,
            style: const TextStyle(
              fontSize: 12,
              color: Color(0x79ffffff),
              overflow: TextOverflow.visible,
            ),
            textAlign: TextAlign.center,
          ),
          const SizedBox(height: 16),
        ],
      ),
    );
  }

  Widget buildContent(BuildContext context) {
    return Column(
      children: ranges.map((v) => age(context, v)).toList(),
    );
  }

  Widget age(BuildContext context, String age) {
    var index = context.watch<_AgeIndex>().value;
    return Container(
      height: 40,
      margin: const EdgeInsets.symmetric(horizontal: 42, vertical: 6),
      decoration: BoxDecoration(
        shape: BoxShape.rectangle,
        borderRadius: BorderRadius.circular(8),
        color: const Color(0xFF232428),
      ),
      child: GestureDetector(
        onTap: () => onAgeChanged(context, age),
        behavior: HitTestBehavior.opaque,
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(age),
              RadioButton(
                onChanged: (value) => onAgeChanged(context, age),
                value: age,
                groupValue: index != null ? ranges[index] : null,
              ),
            ],
          ),
        ),
      ),
    );
  }

  void onAgeChanged(BuildContext context, String v) {
    context.read<_AgeIndex>().check(ranges.indexOf(v));
  }

  void onClickNext() {
    if (index.value == null) {
      showToast('Please select your age.');
      return;
    }
    context.read<Config>().stepIn(OnboardingStep.language);
    context.go('/language');
  }
}

class _AgeIndex extends ChangeNotifier {
  int? _value;

  int? get value => _value;

  void check(int value) {
    _value = value;
    notifyListeners();
  }
}
